<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2023-12-21 10:30:28
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-12-26 13:51:47
-->
<template>
  <div class="content">
    <div class="_content">
      <div class="page-head">
        <svg
          t="1695570158754"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="27728"
          width="22"
          height="22"
          @click="previousLayer"
        >
          <path
            d="M399.471111 512.806365l356.22005-346.652138c24.105001-24.089651 24.140817-63.11548 0.032746-87.186711-24.106024-24.055882-63.185065-24.039509-87.291088 0.051165L268.308839 468.412272c-24.106024 24.089651-24.140817 63.11548-0.032746 87.170339a61.887512 61.887512 0 0 0 5.831822 5.121648l394.668734 384.118447c24.106024 24.088628 62.97938 24.346501 86.776366 0.583285 23.762193-23.763217 23.521716-62.549591-0.618077-86.63822L399.471111 512.806365z"
            fill="#ffffff"
            p-id="27729"
          ></path>
        </svg>
        我的订单
      </div>
      <div class="searchOrder">
        <input
          placeholder="输入手机号查询订单"
          type="text"
          class="ant-input css-1qb1s0s"
          style="margin-right: 10px"
        />
        <button class="css-1qb1s0s ant-btn ant-btn-primary" type="button">
          <span>搜索订单</span>
        </button>
      </div>
      <div v-if="data.Imagestatus" class="orderNull">
        <img
          src="../assets/index_image/orderNull-bafdc723.png"
          alt=""
          srcset=""
        />
        <p>抱歉,暂无查询记录!快去查询吧</p>
      </div>
      <div
        class="pay_content"
        v-for="(item, index) in data.web_info"
        :key="index"
        @click="navigateToDetail(item.id)"
      >
        <div class="a-flex">
          <img
            src="/src/assets/index_image/cWRTCcv6i0LL.png"
            alt=""
            srcset=""
          />
          <div class="info">
            <div class="cardId">姓名：{{ data.info.realName }}</div>
            <div class="cardId">证件号：{{ data.info.idCard }}</div>
            <div class="cardId">订单号：{{ item.out_trade_no }}</div>
            <div class="cardId">时间：{{ item.create_time }}</div>
            <div class="cardId"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, watch, defineProps, defineEmits } from "vue";
import { useRouter, useRoute } from "vue-router";
import request from "../api/reuests";
import { setItem, getItem, removeItem } from "../uint/localStorage.js";
const router = useRouter();
const route = useRoute();
const data = reactive({
  info: {},
  web_info: {},
  num_info: 0,
  Imagestatus: true,
});
const previousLayer = () => {
  router.go(-1);
};
const getlist = () => {
  data.Imagestatus = true;
  request({
    url: "/index/list",
    method: "POST",
    data: data.info,
    fail: (res) => {
      // 处理失败响应数据
    },
  }).then((res) => {
    if (res.code == 200) {
      data.num_info = res.data?.length;
      data.web_info = res.data;
      data.Imagestatus = false;
      if (!data.num_info) {
        data.Imagestatus = true;
      }
    } else {
      data.Imagestatus = true;
    }
  });
};
const navigateToDetail = (id) => {
  router.push({
    path: "/list",
    query: {
      id: id,
    },
  });
};
onMounted(() => {
  data.info = getItem("info");
  getlist();
});
</script>

<style lang="less" scoped>
.content {
  min-height: 100vh;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url(../assets/index_image/h5-18255dc0.png);
  background-size: cover;
}
._content {
  margin: 0 auto;
  min-height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  background-image: url(/assets/h5-18255dc0.png);
  max-width: 750px;
  box-shadow: 0 0 15px 4px #dbcfad;
  background: #fff;
  position: relative;
}
.page-head {
  background: rgb(31, 118, 255);
  height: 44px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 700;
  svg {
    position: absolute;
    left: 10px;
    cursor: pointer;
  }
}
.searchOrder {
  display: flex;
  padding: 10px;
}

.ant-input {
  box-sizing: border-box;
  margin: 0;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  background-color: #ffffff;
  background-image: none;
  border-width: 1px;
  border-style: solid;
  border-color: #d9d9d9;
  border-radius: 6px;
  transition: all 0.2s;
}
.ant-input:placeholder-shown {
  text-overflow: ellipsis;
}

/deep/input:focus-visible {
  outline: none;
}
input:active {
  border-color: #4096ff;
}
input:hover {
  border-color: #4096ff;
}
.ant-btn {
  outline: none;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  user-select: none;
  touch-action: manipulation;
  line-height: 1.5714285714285714;
  color: rgba(0, 0, 0, 0.88);
}

.ant-btn {
  font-size: 14px;
  height: 32px;
  padding: 4px 15px;
  border-radius: 6px;
}
.ant-btn-primary {
  color: #fff;
  background-color: #1677ff;
  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
}
.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #4096ff;
}
.orderNull {
  text-align: center;
  color: #999;
  font-size: 14px;
  img {
    width: 100%;
    max-width: 300px;
    margin-top: 50px;
    margin-bottom: 20px;
  }
}
.tabulation {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
.pay_content {
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
.pay_content {
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  width: calc(100% - 40px);
  margin: 0px auto;
  padding: 20px;
  box-sizing: border-box;
}
.a-flex {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(229, 229, 229);
  padding-bottom: 15px;
  position: relative;
  img {
    width: 60px;
    height: 60px;
  }
  .info {
    padding-left: 10px;
  }
}
.cardId {
  font-size: 12px;
  margin-bottom: 1px;
}
@media screen and (min-width: 750px) {
  .a-flex {
    .info {
      display: flex;
      flex-wrap: wrap;
      padding-left: 15px;
    }
  }
  .cardId {
    width: 50%;
    margin-bottom: 5px;
  }
}
</style>
